<template>
  <div>
    <img :src="skuInfo.skuInfo?.skuDefaultImg" alt="" class="ONe" />
    <div class="TWo">
      <div class="TWo-top"><text>新品尝鲜价 | 距结束5天9小时</text></div>
      <div class="TWo-bottom">
        <text>￥{{ skuInfo.skuInfo?.price }}<text>￥7299</text></text>
      </div>
    </div>
    <div class="THree">{{ skuInfo.skuInfo?.skuName }}</div>
    <div class="FOur"></div>
    <div class="bottom">
      <van-action-bar>
        <van-action-bar-icon icon="cart-o" text="购物车" @click="gotocart" />
        <van-action-bar-button type="warning" text="加入购物车" @click="good" />
        <van-action-bar-button type="danger" text="立即购买" @click="cenggong" />
      </van-action-bar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { showDialog } from 'vant'
// 导入生命周期函数
import { onMounted, ref } from 'vue'
// 导入api
import { getDetails } from '@/api/details'
// 导入vue-Router
import { useRoute, useRouter } from 'vue-router'
// 生命一个钩子函数
// 在最早的时候执行单个商品详情的函数

// 声明一个变量,用于存储商品详情数据
const skuInfo = ref({})

// 获取商品信息
const getDetailsData = async () => {
  // 处理需要的参数 -- 从当前路由信息中取
  const route = useRoute()
  try {
    const result = await getDetails(route.query.id)
    // console.log(result)
    skuInfo.value = result
  } catch (error) {
    return error
  }
}
const cenggong = () => {
  showDialog({
    title: '支付成功',
    message: '恭喜你,支付成功。',
    theme: 'round-button'
  }).then(() => {
    // on close
  })
}
const good = () => {
  showDialog({
    title: '加入购物车成功',
    message: '恭喜你,加入购物车成功。',
    theme: 'round-button'
  }).then(() => {
    router.push('/shoppingCart')
  })
}
// 获取路由实例
const router = useRouter()
// 去购物车
const gotocart = () => {
  router.push('/shoppingCart')
}

onMounted(() => {
  getDetailsData()
})
</script>

<style scoped>
.ONe {
  width: 100%;
  height: 450px;
}
.TWo {
  margin-top: -4px;
  background-color: red;
  height: 60px;
  padding-left: 12px;
  color: white;
}

.TWo-top {
  padding-top: 10px;
}
.TWo-bottom {
  font-size: 26px;
}
.TWo-bottom > text > text {
  font-size: 14px;
  text-decoration: line-through;
}
.THree {
  margin-top: 20px;
  font-size: 15px;
}
</style>
